<template>
	<view class="school-item fboxRow Ycenter">
	  <view class="pic" @tap="schoolClick(info.schoolId || info.id)"><image class="logo" :src="info.logo || info.img" mode="aspectFit"></image></view>
	  <view class="fboxCol flex1" @tap="schoolClick(info.schoolId || info.id)">
	    <view class="title font-ell1 font28 fboxRow color-36363A">
	      <view class="name">{{info.schoolName || info.name}}</view>
	      <view class="hot flex1 fboxRow Xend font22 color-9899A1"  v-if="type == 'list'"> {{school.popularity}} 热度</view>
	    </view>
	    <view class="tags fboxWrap">
	        <view v-for="(item, index) in info.tags" :key="index" class="tag font22 bg-F5F5FA color-9899A1">{{item}}</view>
	    </view>
	  </view>
	  <view class="collect" v-if="type == 'collect'">
	  	<text v-if="!info.isCheck" @tap="onCollect(info, index, true)" class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36" />
	  	<text v-else @tap="onCollect(info, index, false)" class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" />
	  </view>
	</view>
</template>

<script>
export default {
	props: {
		info: {
			type: Object,
			default: {}
		},
		type:{
			type: String,
			default: 'list' // list || collect
		},
		index: {
			type: Number,
			default: 0
		}
	},
	watch:{
		info:{
			handler(item){
				if(item.popularity){
				  if (item.popularity >= 1000) {
					item.popularity = (item.popularity / 10000).toFixed(1) + 'W'
				  }
				}
			  this.school = item
			},
			deep: true,
			immediate: true
		}
	},
	data() {
		return {
			someData: {},
			school: {}
		};
	},
	methods: {
		schoolClick(id) {
			this.$pageTo('/bks/index/school/index/index', { id })
		},
		onCollect(info, index, status){
			this.$emit('collect',{info, index, status})
		}
	}
};
</script>

<style scoped lang="scss">
.school-item{padding: 30rpx;min-height: 160rpx; border-bottom: 1px solid #F0F0F5;overflow: hidden;}

.pic{width: 100rpx;margin-right: 20rpx;}
.pic .logo{width: 100rpx;height: 100rpx;border-radius: 50rpx;}
.title{height: 48rpx;line-height: 48rpx;}
// .title{width: 570rpx; height: 48rpx;}
// .title .name{max-width: 70%;white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
.tags{margin-top: 10rpx;overflow: hidden;}
.tags .tag{margin: 0 12rpx 12rpx 0; padding:0 16rpx; height: 36rpx;line-height: 36rpx;white-space: nowrap;border-radius: 3rpx;}
.collect{margin-left: 20rpx;}
</style>
